<template>
    <div class="patient-management">
      <!-- 搜索栏 -->
      <div class="search-container">
        <el-input
          v-model="searchName"
          placeholder="输入患者姓名搜索"
          clearable
          @clear="searchPatients"
          style="width: 300px; margin-right: 10px"
        />
        <el-button type="primary" @click="searchPatients">查询</el-button>
      </div>
  
      <!-- 患者表格 -->
      <el-table :data="patientList" border style="width: 100%" v-loading="loading">
        <el-table-column prop="userId" label="用户ID" width="120" />
        <el-table-column prop="name" label="姓名" width="150" />
        <el-table-column prop="gender" label="性别" width="80">
          <template #default="{ row }">
            {{ row.gender === 'Male' ? '男' : row.gender === 'Female' ? '女' : '-' }}
          </template>
        </el-table-column>
        <el-table-column prop="dateOfBirth" label="出生日期" width="120" />
        <el-table-column prop="age" label="年龄" width="80" />
        <el-table-column prop="emergencyContact" label="紧急联系人" />
        <el-table-column prop="insuranceCardNumber" label="医保卡号" />
        <el-table-column label="操作" width="120">
          <template #default="{ row }">
            <el-button
              type="danger"
              size="small"
              @click="handleDelete(row.userId)"
              :loading="deleteLoading[row.userId]"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </template>
  
  <script>
  import { queryPatientsByName, deleteUser } from '@/api/userManger'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import { jwtDecode } from 'jwt-decode'
  
  export default {
  data() {
    return {
      searchName: '',
      patientList: [],
      loading: false,
      deleteLoading: {} // 用于存储每个删除按钮的加载状态
    };
  },

  created() {
    this.fetchPatients();
  },

  methods: {
    // 获取患者列表
    async fetchPatients() {
      this.loading = true;
      try {
        const params = this.searchName ? { name: this.searchName } : null;
        const response = await queryPatientsByName(params);
        this.patientList = response.data || [];
      } catch (error) {
        ElMessage.error('获取患者列表失败');
      } finally {
        this.loading = false;
      }
    },

    // 搜索结果
    searchPatients() {
      this.fetchPatients();
    },

    // 删除患者
    async handleDelete(userId) {
      try {
        await ElMessageBox.confirm('确定要删除该患者吗？', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        });

        // 使用直接赋值来更新 deleteLoading 对象
        this.deleteLoading = { ...this.deleteLoading, [userId]: true };

        const token = localStorage.getItem('token');
        const { phone } = jwtDecode(token);

        await deleteUser({ userId, phone });

        ElMessage.success('删除成功');
        await this.fetchPatients(); // 刷新列表
      } catch (error) {
        if (error !== 'cancel') {
          ElMessage.error('删除失败：' + (error.response?.data?.msg || error.message));
        }
      } finally {
        // 使用直接赋值来更新 deleteLoading 对象
        this.deleteLoading = { ...this.deleteLoading, [userId]: false };
      }
    }
  }
};
  </script>
  
  <style scoped>
  .patient-management {
    padding: 20px;
  }
  
  .search-container {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
  }
  
  .el-table {
    margin-top: 20px;
  }
  </style>